<template>
  <!-- <div>工作状态衡量</div> -->
  <Card>
    <Row>
      <Col>
        <Select
          v-model="params.project_id"
          v-width="200"
          placeholder="请选择项目"
          @on-change="changepro"
        >
          <Option
            v-for="item in projectList"
            :value="item.project_id"
            :key="item.project_id"
            >{{ item.name }}</Option
          >
        </Select>
      </Col>
      <Col class="ivu-ml-16">
        <RadioGroup
          v-model="patientDate"
          type="button"
          @on-change="changeradio"
        >
          <Radio
            :label="item.value"
            v-for="item in daydata"
            :key="item.value"
            >{{ item.name }}</Radio
          >
        </RadioGroup>
      </Col>
      <Col>
        <DatePicker
          class="ivu-ml-16"
          :editable="false"
          type="daterange"
          v-model="date"
          placeholder="日期选择"
          element-id="date"
          @on-change="changeDate"
          :clearable="false"
        ></DatePicker>
      </Col>
    </Row>
    <!-- <Table highlight-row  row-key="account" :indent-size="0" :load-data="handleLoadData"  :update-show-children="true"  :columns="tablecolumns"  border :data="data" :loading="loading" size="small" class="ivu-mt-16">
        </Table> -->
    <!-- <Table highlight-row  row-key="account" :indent-size="0"  :load-data="handleLoadData" :update-show-children="true"  :columns="twocolumns"  border :data="columnsData" :loading="tableloading" size="small" class="ivu-mt-16">
        </Table> -->
    <!-- u-table 客服通话统计-->
    <div style="position: relative">
      <u-table
        size="small"
        class="ivu-mt-16"
        :data="data"
        style="width: 100%"
        row-key="id"
        lazy
        :load="load"
        :max-height="700"
        :loading="loading"
        :tree-props="{ children: 'children' }"
      >
        <u-table-column
          prop="account"
          label="客服通话统计"
          min-width="40"
        ></u-table-column>
        <u-table-column label="5星通话">
          <!-- <u-table-column prop="call_out" label="拨号" min-width="40"></u-table-column> -->
          <u-table-column
            prop="voice_person_num_ab"
            label="通话人数"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="voice_num_ab"
            label="通话次数"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="voice_time_ab"
            label="通话时长"
            min-width="40"
          ></u-table-column>
        </u-table-column>
        <!-- <u-table-column prop="voice_time" label="通话时长（分钟）" min-width="40"></u-table-column> -->
        <u-table-column label="5星通话时长分类" min-width="40">
          <u-table-column
            prop="one_minute"
            label="<1分钟"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="three_minute"
            label="1-3分钟"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="ten_minute"
            label="3-10分钟"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="more"
            label=">10分钟"
            min-width="40"
          ></u-table-column>
        </u-table-column>
        <u-table-column label="其他星通话">
          <u-table-column
            prop="voice_person_num_cd"
            label="通话人数"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="voice_num_cd"
            label="通话次数"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="voice_time_cd"
            label="通话时长"
            min-width="40"
          ></u-table-column>
        </u-table-column>
      </u-table>
      <!-- u-table 客服微信统计-->
      <u-table
        size="small"
        class="ivu-mt-16"
        :data="columnsData"
        style="width: 100%"
        row-key="account"
        :loading="tableloading"
        lazy
        :load="load"
        :max-height="700"
        :tree-props="{ children: 'children' }"
      >
        <u-table-column
          prop="account"
          label="客服微信统计"
          min-width="40"
        ></u-table-column>
        <u-table-column label="5星客户维护">
          <u-table-column
            prop="sendMsgAb"
            label="发消息数"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="receiveAb"
            label="收消息数"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="contactPatientNumAb"
            label="联系客户数"
            min-width="40"
          ></u-table-column>
        </u-table-column>
        <u-table-column label="5星互动客户数">
          <!-- <u-table-column prop="one" label="1-3句" min-width="40"></u-table-column>
                <u-table-column prop="four" label="4-10句" min-width="40"></u-table-column> -->
          <u-table-column
            prop="reply"
            label="有回复"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="replyTen"
            label="回复超过10句"
            min-width="40"
          ></u-table-column>
        </u-table-column>

        <u-table-column label="5星消息类别" min-width="40">
          <u-table-column
            prop="msgTxtAb"
            label="文字"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="msgVoiceAb"
            label="语音"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="msgCallAb"
            label="电话"
            min-width="40"
          ></u-table-column>
        </u-table-column>
        <u-table-column label="其他星客户维护">
          <u-table-column
            prop="sendMsgCd"
            label="发消息数"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="receiveCd"
            label="收消息数"
            min-width="40"
          ></u-table-column>
          <u-table-column
            prop="contactPatientNumCd"
            label="联系客户数"
            min-width="40"
          ></u-table-column>
        </u-table-column>
      </u-table>
      <!-- <ux-grid
            size="small"
            class="ivu-mt-16"
            :data="data"
            style="width: 100%"
            row-key="id"
            :max-height="700"
            :tree-config="{lazy: true, children: 'children', hasChild: 'hasChildren', loadMethod: loadChildrenMethod}"
        >
            <ux-table-column field="account" title="客服通话统计" min-width="40" tree-node></ux-table-column>
            <ux-table-column title="5星通话">
                <ux-table-column field="voice_person_num" title="通话人数" min-width="40"></ux-table-column>
                <ux-table-column field="voice_num" title="通话次数" min-width="40"></ux-table-column>
                <ux-table-column field="voice_time" title="通话时长" min-width="40"></ux-table-column>
            </ux-table-column>
            <ux-table-column  title="5星通话时长分类" min-width="40">
                <ux-table-column field="one_minute" title="<1分钟" min-width="40"></ux-table-column>
                <ux-table-column field="three_minute" title="1-3分钟" min-width="40"></ux-table-column>
                <ux-table-column field="ten_minute" title="3-10分钟" min-width="40"></ux-table-column>
                <ux-table-column field="more" title=">10分钟" min-width="40"></ux-table-column>
            </ux-table-column>
            <ux-table-column title="其他星通话=总通话-（5星）通话">
                <ux-table-column field="" title="通话人数" min-width="40"></ux-table-column>
                <ux-table-column field="" title="通话次数" min-width="40"></ux-table-column>
                <ux-table-column field="" title="通话时长" min-width="40"></ux-table-column>
            </ux-table-column>
           
        </ux-grid> -->
      <Spin fix v-if="loading || tableloading"></Spin>
    </div>
  </Card>
</template>
<script>
import { wechatreportList, voicereportList } from "@/api/hqapi";
import dayjs from "dayjs";
import { UTable, UTableColumn } from "umy-ui";
export default {
  components: {
    UTable,
    UTableColumn,
  },
  data() {
    return {
      date: [],
      params: { project_id: "", diseases_ids: [] },
      projectList: [],
      patientDate: "yesterDay",
      daydata: [
        { value: "yesterDay", name: "昨天" },
        { value: "toDay", name: "今天" },
        { value: "sevenDay", name: "周" },
        { value: "month", name: "月" },
      ],
      data: [],
      loading: false,
      tableloading: false,

      columnsData: [],
      patient_diseases_id: [],
      patient_diseases_child_id: [],
    };
  },
  mounted() {
    this.projectList = JSON.parse(localStorage.getItem("project"));
    this.params.project_id = this.projectList[0]
      ? this.projectList[0].project_id
      : "";
    this.changeradio(this.patientDate);
  },
  methods: {
    changeradio(e) {
      let week = dayjs().$W;
      let year = dayjs().$y;
      let months = dayjs().$M + 1;
      let day = dayjs().format("YYYY-MM-DD");
      let yesterDay = dayjs().subtract(1, "day").format("YYYY-MM-DD");
      let sevenDay = "";
      let num;
      if (week === 0) num = 7;
      else num = week;
      sevenDay = dayjs()
        .subtract(num - 1, "day")
        .format("YYYY-MM-DD");
      let month = dayjs(`${year}-${months}-1`).format("YYYY-MM-DD");
      if (e === "toDay") {
        this.date = [day, day];
      } else if (e === "yesterDay") {
        this.date = [yesterDay, yesterDay];
      } else if (e === "sevenDay") {
        this.date = [sevenDay, day];
      } else if (e === "month") {
        this.date = [month, day];
      }
      this._voicereportList();
      this._wechatreportList();
    },
    changepro() {
      this._voicereportList();
      this._wechatreportList();
    },
    changeDate() {
      this.patientDate = "";
      this._wechatreportList();
      this._voicereportList();
    },
    handleLoadData(item, callback) {
      //  console.log(item,'item')
      item._loading = true;
      // setTimeout(() => {
      //     const data = this.allData[item.id];
      //     // console.log(data,'data')
      //     callback(data);
      // });
    },
    // 客服通话统计列表
    _voicereportList() {
      this.loading = true;
      this.data = [];
      let diseases_id = [...new Set(this.patient_diseases_id)];
      let diseases_child = [...new Set(this.patient_diseases_child_id)];
      const params = {
        project_id: this.params.project_id,
        // start_time: '2021-01-01',
        // end_time: '2022-07-31',
        start_time: this.date[0]
          ? dayjs(this.date[0]).format("YYYY-MM-DD")
          : "",
        end_time: this.date[1] ? dayjs(this.date[1]).format("YYYY-MM-DD") : "",
        // patient_diseases_id: diseases_id.join(','),// 一级病种
        // patient_diseases_child_id: diseases_child.join(','),// 子级病种
      };
      voicereportList(params)
        .then((res) => {
          res.average.account = "项目均值";
          let cc = res.average;
          res.total.account = "项目总计";
          let total = res.total;
          const arr = res.voice_row;
          if (arr.length > 0) {
            arr.push(cc, total);
          }
          this.data = arr;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 客户微信统计列表
    _wechatreportList() {
      this.tableloading = true;
      this.columnsData = [];
      let diseases_id = [...new Set(this.patient_diseases_id)];
      let diseases_child = [...new Set(this.patient_diseases_child_id)];
      const params = {
        project_id: this.params.project_id,
        // start_time: '2021-01-01',
        // end_time: '2022-07-31',
        start_time: this.date[0]
          ? dayjs(this.date[0]).format("YYYY-MM-DD")
          : "",
        end_time: this.date[1] ? dayjs(this.date[1]).format("YYYY-MM-DD") : "",
        // patient_diseases_id: diseases_id.join(','),// 一级病种
        // patient_diseases_child_id: diseases_child.join(','),// 子级病种
      };
      wechatreportList(params)
        .then((res) => {
          res.average.account = "项目均值";
          let cc = res.average;
          res.total.account = "项目总计";
          let total = res.total;
          const arr = res.voice_row;
          if (arr.length > 0) {
            arr.push(cc, total);
          }
          this.columnsData = arr;
          this.tableloading = false;
        })
        .catch(() => {
          this.tableloading = false;
        });
    },
    load(tree, treeNode, resolve) {
      debugger;
      console.log(tree, "tree");
    },
  },
};
</script>
